<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta content="telephone=no" name="format-detection">
    <title>食物详情</title>
    <script src="../../../js/jquery-1.8.3.min.js"></script>
    <script src="../../../js/mobile.js"></script>
    <script src="../../../js/md5.js"></script>
    <script src="../../../js/requestHelper.js"></script>
    <script src="./js/jquery.circliful.min.js"></script>
    <!-- 根据额外需求引用fix.js -->
    <script src="../js/fix.js"></script>

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/jquery.circliful.css" type="text/css">
</head>
<style>
    .block {
        width: 7rem;
        position: inherit;
        background-color: rgb(255, 255, 255);
        margin: 0 .25rem;
        border-top: 0.01rem solid lightgray
    }

    .ft-34 {
        font-family: PingFangSC-Medium, sans-serif;
        font-size: 0.34rem;
        color: rgb(51, 51, 51);
    }

    .font {
        font-family: PingFangSC-Light, sans-serif;
        padding: 0.06rem;
        display: inline-block;
        font-size: 0.2rem;
        color: rgb(153, 153, 153);
    }

    .font_active {
        font-size: 0.24rem !important;
        color: rgb(34, 131, 226) !important;
        border-bottom: 2px solid rgb(34, 131, 226);
    }

    .font-24-regular {
        font-family: PingFangSC-Regular, sans-serif;
        font-size: .24rem;
        color: rgb(51, 51, 51);
    }

    .font-30-regular {
        font-family: PingFangSC-Regular, sans-serif;
        font-size: .30rem;
        color: rgb(51, 51, 51);
    }

    .ft-30 {
        font-size: .3rem;
        font-family: PingFangSC-Regular, sans-serif;
        color: rgb(51, 51, 51);
    }

    .level_txt span {
        display: inline-block;
        margin-right: .06rem;
        width: 30%;
    }

    .tb_bk3 {
        display: table-cell;
        text-align: right;
        vertical-align: middle;
        padding-right: 0.02rem;
        width: 1.08rem;
        height: .44rem;
        background-image: url(./images/pic4.png);
    }

    .circle_group {
        text-align: center;
    }

    .circle_group>div {
        display: inline-block
    }

    .nutrition {
        text-align: center;
    }

    .nutrition>div {
        text-align: center;
        width: 32%;
        display: inline-block;
    }

    .center {
        text-align: center;
    }

    .uni {
        margin: .41rem 0;
    }

    .Blood_glucose span:nth-child(1),
    .Blood_glucose2 span:nth-child(1) {
        font-family: PingFangSC-Light, sans-serif;
        font-size: .24rem;
        color: rgb(51, 51, 51);
    }

    .Blood_glucose span:nth-child(2),
    .Blood_glucose2 span:nth-child(2) {
        font-family: PingFangSC-Light, sans-serif;
        font-size: .24rem;
        color: rgb(51, 51, 51);
        margin: 0 2rem;
    }

    .Blood_glucose span:nth-child(3),
    .Blood_glucose2 span:nth-child(3) {
        font-family: PingFangSC-Light, sans-serif;
        font-size: .24rem;
        color: rgb(34, 131, 226);
    }

    .Blood_glucose {
        text-align: center;
        margin-bottom: .66rem;
    }

    .Blood_glucose2 {
        text-align: center;
        padding-bottom: .45rem;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: #f5f5f5;
    }

    .header h2 {
        margin: 0;
        text-align: center;
        float: left;
        width: 6rem;
        font-size: .34rem;
        font-weight: bold;
    }

    .home-back {
        margin: .5rem 0 0 .3rem;
        width: .29rem;
        height: .34rem;
        background: url(images/pic3.png);
        background-size: cover;
        float: left;
    }

    .header {
        background: #fff;

        color: #333;
        height: 1.4rem;
        line-height: 1.4rem;

    }

    .none {
        display: none;
    }
</style>
<script>
    $(document).ready(function () {
        $(".kilo1").on("click", function () {
            $(this).siblings().removeClass("font_active");
            $(this).addClass("font_active");
            var uni = $.trim($(this).text());
            if (uni == "千焦") {
                $("#BmiLevel").text(210);
                figure_rate("#BmiLevel", "#rate", "#runningball", 300);
            } else {
                $("#BmiLevel").text(112);
                figure_rate("#BmiLevel", "#rate", "#runningball", 300);
            }
            $(".kilo").text(uni);
        });

        function figure_rate(a, b, c, d) {
            $("#run_div").remove();
            var bmi = parseInt($.trim($(a).text()).replace("%", "").replace("千卡", ""));
            var run_width = bmi / d; //40是总数
            if (run_width <= 1) {
                var total_width = $(b).width();
                var run = (total_width * run_width) / 100;
                $(c).parent().prepend('<div id="run_div" style="position:relative;width:' + run +
                    'rem;height:.05rem;display: inline-block"></div>')
            } else {
                console.log("滚动条数值" + bmi + "超出最大值" + d + "，请检查关系")
            }
        }
        figure_rate("#BmiLevel", "#rate", "#runningball", 300);
        $('#myStat').attr("data-dimension", $('.block').width() / 5);
        $('#myStat').circliful(); //画圆
        $('#myStat1').attr("data-dimension", $('.block').width() / 5);
        $('#myStat1').circliful(); //画圆
        $('#myStat2').attr("data-dimension", $('.block').width() / 5);
        $('#myStat2').circliful(); //画圆
        // $("#myStat").attr("data-dimension",$('#myStat').width());
        // $('#myStat').circliful(); //画圆
    });

    $(function () {
        var myDate = new Date();
        var today = myDate.getDate();
        console.log(today);

        var $param = {};
        var $data = {};
        $data.userId = "333";
        $param.data = $data;
        var real_addr = "/uweb/service/v1/ksd/healthy/getWeekDietPlan" //上线的地址 added by zhangming ayt 20181212
        Post("http://test.unilifemedia.com/uweb/service/v1/ksd/healthy/getWeekDietPlan", $param, function (
            response) {
            console.log(response);
            var str = '',
                str1 = '';
            for (var i = 0; i < response.length; i++) {
                var weekDay = response[i].weekDay;
                var newWeekDay = weekDay.substr(0, 1);
                console.log(newWeekDay);
                var date = response[i].date;
                var newDate = date.substr(8);
                console.log(newDate)
                str1 += '<li>' + newWeekDay + '</li>';
                str += '<li>' + newDate + '</li>';
            }
            $(".date-s").append(str1 + '<br style="clear:both">');
            $(".date").append(str + '<br style="clear:both">');

        })


    })
</script>

<body>
    <div style="position: relative;">
        <div style="background-color: white;width:7.5rem;position: relative;">
            <div class="header" style="border-bottom: 0.01rem solid #f5f5f5;">
                <div class="home-back" onclick="history.go(-1)"></div>
                <h2>综合评估</h2>
                <br style="clear:both">
            </div>
            <img class="p_share" src="images/share.png" alt="">
        </div>
        <div style=" width:7.25rem;position: relative;background-color: rgb(255, 255, 255);margin: 0 .25rem">
            <img style="position:absolute;top:0.3rem;right:0.3rem;width:1.3rem;height:1.3rem;border-radius: 0.08rem;"
                src="./images/yumi.png" alt="无">
            <div style="padding:.5rem .2rem">
                <div class="ft-34">玉米（鲜）</div>
                <div>
                    <div
                        style="display: inline-block;background-color:rgb(104,180,76);width:0.22rem;height: 0.22rem;border-radius: 0.2rem">
                    </div>
                    <span
                        style="font-size: 0.3rem;color:rgb(121, 185, 98); font-family: PingFangSC-Regular, sans-serif;">绿灯食物</span>
                    <span
                        style="font-size: .2rem;color:rgb(153,153,153);font-family: PingFangSC-Light, sans-serif;">推荐食用</span>
                </div>
            </div>
        </div>
        <div style="width:7.5rem;position: relative;background-color: rgb(255, 255, 255)">
            <div
                style="padding:.3rem .45rem;background: -webkit-linear-gradient(top, rgba(153,153,153,0.1) 1% , white);">
                <span class="ft-34">热量</span>
                <div class="fr" style="display: inline-block;">
                    <div class="font kilo1 font_active">千卡</div>
                    <div class="font kilo1">千焦</div>
                </div>
            </div>
            <div
                style="text-align: center;width:2rem;font-size: .24rem;margin: 0 auto;font-family: PingFangSC-Regular, sans-serif;">
                <span id="BmiLevel"
                    style="font-size: .6rem;color: rgb(34,131,226);margin-right: .2rem;font-family: PingFangSC-Medium, sans-serif;">112</span><span
                    class="kilo">千卡</span>
            </div>
            <p class="font-24-regular" style="text-align: center">每100克 (可食用部分)</p>
            <div id="rate" style="width: 6.2rem;margin:.5rem auto ;position:relative;">
                <div style="font-size: 0;">
                    <div
                        style="display:inline-block;height:.05rem;background-color:rgb(137,180,253);margin-right:.06rem;width:2rem">
                    </div>
                    <div
                        style="display:inline-block;height:.05rem;background-color:rgb(93,153,255);margin-right:.06rem;width:2rem">
                    </div>
                    <div
                        style="display:inline-block;height:.05rem;background-color:rgb(34,131,226);margin-right:.06rem;width:2rem">
                    </div>
                </div>
                <div>
                    <div id="runningball" class="run_circle" style="position:absolute;top:-.15rem;">
                        <div></div>
                    </div>
                </div>

                <div class="font-24-regular level_txt"
                    style="width: 6.2rem;margin:.2rem auto;text-align: center;padding-top:.4rem;">
                    <span>相对较低</span>
                    <span>相对一般</span>
                    <span>相对较高</span>
                </div>
            </div>
        </div>
        <div class="font-24-regular" style="text-align: center;padding-bottom: .5rem">热量低于 <span
                style="color:rgb(34,131,226)">90%</span>
            的天然谷薯</div>

        <div class="block">
            <div style="margin:.2rem 0 .2rem 0"><span class="ft-34">食物亮点</span></div>
            <div style="padding-bottom: .35rem;">
                <div class="tb_bk3 font-24-regular">
                    <span style="margin-right:0.1rem;font-size: .2rem;"></span>
                </div>
                <div class="tb_bk3 font-24-regular">
                    <span style="margin-right:0.1rem;font-size: .2rem;">低脂肪</span>
                </div>
                <div class="tb_bk3 font-24-regular">
                    <span style="margin-right:0.1rem;font-size: .2rem;">中GI</span>
                </div>
                <div class="tb_bk3 font-24-regular">
                    <span style="margin-right:0.1rem;font-size: .2rem;">中GL</span>
                </div>
            </div>
            <div style="line-height: .1rem;padding-bottom: .5rem"> <img
                    style="vertical-align: middle;margin-right: .1rem;width:.3rem;height:.3rem;" src="./images/pic5.png"
                    alt="无"><span class="font-24-regular" style="vertical-align: middle">收录在「低碳水化合物-谷薯类别」</span>
            </div>
        </div>
        <div class="block">
            <div style="margin:.2rem 0 .2rem 0"><span class="ft-34">营养元素</span><span class="font fr">单位：每100克</span>
            </div>
            <div class="circle_group">
                <div id="myStat" data-dimension="150" data-text="14%" data-width="6" data-fontsize="30"
                    data-percent="14" data-fgcolor="rgb(34,131,226)" data-bgcolor="#eee"></div>
                <div id="myStat1" style="margin: 0 10%;" data-dimension="150" data-text="9%" data-width="6"
                    data-fontsize="30" data-percent="9" data-fgcolor="rgb(34,131,226)" data-bgcolor="#eee"></div>
                <div id="myStat2" data-dimension="150" data-text="77%" data-width="6" data-fontsize="30"
                    data-percent="77" data-fgcolor="rgb(34,131,226)" data-bgcolor="#eee"></div>
                <!-- data-text是中间显示的百分比数字， data-percent是图像百分比-->
            </div>
            <div class="nutrition font-24-regular">
                <div><span>蛋白质<div>32.0克</div></span></div>
                <div><span>脂肪<div>4.0克</div></span></div>
                <div><span>碳水化合物<div>4.0克</div></span></div>
            </div>
            <div class="font center" style="width:100%;margin: 0 auto;padding:.3rem 0 .2rem 0">更多营养元素 > </div>
        </div>
        <div class="block">
            <div style="margin:.2rem 0 .47rem 0"><span class="ft-34">单位重量</span></div>
            <p class="font">重量应按照 <span class="ft-34" style="font-size: .25rem;">可食用部分</span>
                来计算。例如玉米的可食用部分不包含玉米芯，西瓜的可食用部分不包括西瓜皮。</p>
            <div class="uni">
                <div class="ft-30">1根（中）</div>
                <div class="font">290 克，可食用部分：191克</div>
                <span class="font fr" style="margin-top: -0.28rem">149千卡</span>
            </div>
            <div class="uni">
                <div class="ft-30">1根（大）</div>
                <div class="font">290 克，可食用部分：191克</div>
                <span class="font fr" style="margin-top: -0.28rem">214千卡</span>
            </div>
            <div class="uni">
                <div class="ft-30">1根（小）</div>
                <div class="font">290 克，可食用部分：106克</div>
                <span class="font fr" style="margin-top: -0.28rem">118千卡</span>
            </div>
        </div>
        <div class="block">
            <div style="margin:.49rem 0 .78rem 0"><span class="ft-34">血糖相关</span></div>
            <div class="Blood_glucose">
                <span>GL值</span>
                <span>55.0</span>
                <span>中GL</span>
            </div>
            <div class="Blood_glucose2">
                <span>GL值</span>
                <span>55.0</span>
                <span>中GL</span>
            </div>
        </div>
        <div class="block">
            <div style="margin:.2rem 0 .2rem 0"><span class="ft-34">薄荷评价</span></div>
            <p class="font" style="padding-bottom: .2rem;">一种热量较低纤维含量较高的粗粮，适量进食可缓解便秘，营养学会建议每天最好吃50kg以上的粗粮，减肥期间推荐食用。</p>
        </div>
    </div>
</body>

</html>